<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
		<title>小K服务</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="shortcut icon" href="../../../static/favicon.ico" th:href="@{/favicon.ico}">
		<link href="../../../static/mui/css/mui.min.css" th:href="@{/mui/css/mui.min.css}" rel="stylesheet" />
		<style type="text/css">
			.mui-input-group {
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>返回
			</button>
			<h1 class="mui-title">报修单详情</h1>
		</header>
		<div class="mui-content">

			<form class="mui-input-group">
				<div class="mui-input-row">
					<label for="">报修类型</label>
					<input type="text" class="mui-input-clear" th:value="${classifyName}+'-'+${classifySubName}" value="" placeholder="" disabled="disabled">
				</div>
			</form>
			<p style="text-indent: 2em;" th:text="'报修类型说明：'+${classifySubContent}"></p>

			<form class="mui-input-group">
				<div class="mui-input-row">
					<label for="">报修人</label>
					<input type="text" class="mui-input-clear" th:value="${name}" value="报修人" placeholder="报修人" disabled="disabled">
				</div>
				<div class="mui-input-row">
					<label for="">报修地点</label>
					<input type="text" placeholder="报修地点（宿舍号）" th:value="${room}" disabled="disabled">
				</div>
				<div class="mui-input-row">
					<label for="">联系电话</label>
					<input type="text" class="mui-input-clear" th:value="${phone}" placeholder="联系电话" disabled="disabled">
				</div>
			</form>
			<div class="mui-card" style="margin:10px 0;">
				<div class="mui-card-header">报修内容<span class="mui-badge" th:classappend="${status == 1}?'mui-badge-warning':(${status ==2 ||status ==3}?'mui-badge-blue':(${status == 4}?'mui-badge-success'))" th:text="${statusStr}">状态</span></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner" th:text="${content}"></div>
				</div>
				<div class="mui-card-footer" th:text="'报修时间：'+${addTime}"></div>
			</div>

			<div class="mui-content-padded" th:if="${status == 1}">
				<button type="button" class="mui-btn mui-btn-block mui-btn-danger" id="cancel">取消处理报修单</button>
			</div>

		</div>
		<script src="../../../static/mui/js/mui.min.js" th:src="@{/mui/js/mui.min.js}"></script>
		<script type="text/javascript" th:inline="javascript">
            /*<![CDATA[*/
			mui.init();
			mui(document.body).on('tap', '#cancel', function(e) {
			    var btn = this;
				mui(btn).button('loading');
                mui.ajax({
                    type:"post",
                    data:{
                        id:/*[[${id}]]*/""
                    },
                    url:"../cancel",
                    async:true,
                    dataType:"json",
                    success:function(data){
                        if(data.code === 0){
                            mui.toast(data.msg);
                            window.location.href="";
                        }else {
                            mui.toast(data.msg);
                        }
                        mui(btn).button('reset');
                    },
                    error:function(){
                        mui.toast("加载错误");
                        mui(btn).button('reset');
                    }
                });
			});
            /*]]>*/
		</script>
	</body>

</html>